<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .app{
        display:inline-block;
        position: relative;
        padding: 30px;


        /**
          这一章我们来说一说平行四边形的产生
          我们如何让一个正方形变为平行四边形呢?
         */
        /*注意,我们发现我们的文字也变得倾斜,这显然不是我们想要的,这个时候我们可以使用伪类*/
      }
      .app::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';/*如果想要伪类生效必须使用content属性*/
        transform: skewX(-45deg);
        background: deeppink;
        z-index: -1;

      }
    </style>
</head>
<body>
  <div class="app">
    Hello World!
  </div>
</body>
</html>
